<!DOCTYPE html>
<html>
  <head>
    <title>Vis Network | Cypress | Simple</title>

    <style type="text/css">
      html,
      body,
      #mynetwork {
        margin: 0px;
        padding: 0px;
      }

      #mynetwork {
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 50%;
        min-height: 100vh;
        border-right: 1px solid lightgray;
        background: white;
      }

      #text {
        position: absolute;
        left: 50%;
        padding: 1em;
      }

      #title {
        margin-bottom: 5em;
      }
    </style>

    <script
      type="text/javascript"
      src="../../standalone/umd/vis-network.js"
    ></script>
    <link
      href="../../styles/vis-network.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body>
    <div id="text">
      <div id="title">
        <h1>Vis Network</h1>
        <h2>Cypress</h2>
        <h3>Simple</h3>
      </div>

      <div id="events"></div>
    </div>

    <div id="mynetwork"></div>
    <script type="text/javascript">
      /*
       * create a network
       */
      const container = document.getElementById("mynetwork");
      const data = { nodes: [], edges: [] };
      const options = {
        manipulation: true,
        physics: false
      };
      const network = new vis.Network(container, data, options);

      /*
       * Events
       */
      function add(root, names, content) {
        names = Array.isArray(names) ? names : [names];

        const elem = document.createElement("pre");
        elem.classList.add(...names);
        elem.innerText = content;

        root.appendChild(elem);
      }

      const root = document.getElementById("events");
      ["click"].forEach(eventName => {
        network.on(eventName, function(params) {
          console.log({ eventName, params });

          const oldElem = root.querySelector(`#events > .${eventName}`);
          if (oldElem) {
            oldElem.parentNode.removeChild(oldElem);
          }

          const el = document.createElement("div");
          el.classList.add(eventName);

          add(el, ["pointer", "DOM", "x"], params.pointer.DOM.x);
          add(el, ["pointer", "DOM", "y"], params.pointer.DOM.y);
          add(el, ["pointer", "canvas", "x"], params.pointer.canvas.x);
          add(el, ["pointer", "canvas", "y"], params.pointer.canvas.y);

          params.edges.forEach(edgeId => {
            add(el, ["edge", edgeId], edgeId);
          });
          params.nodes.forEach(nodeId => {
            add(el, ["node", nodeId], nodeId);
          });

          root.appendChild(el);
        });
      });
    </script>
  </body>
</html>
